<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script>
    /* 
            32宏任务和微任务
        宏任务：setTimeout、setInterval、Ajax、DOM事件
        微任务：Promise、async\await
        微任务执行比宏任务要早
                                    为什么微任务执行比宏任务要早？
                                    promise会放入微任务队列，而setTimeout、setInterval会放入宏任务队列。
                                    1.因为微任务是ES6语法规定的
                                    2.宏任务是由浏览器规定的

                                    微任务、宏任务和DOM渲染关系？
                                    1.微任务是在DOM渲染前执行的，如Promise
                                    2.宏任务是在DOM渲染后执行的，如setTimeout
                                    3.当调用栈为空时，会执行微任务队列中的任务，然后尝试DOM渲染，之后才会执行宏任务队列中的任务。
    宏任务：DOM渲染后触发，如setTimeout
    微任务：DOM渲染前触发，如Promise
    */
    //案例一： 宏任务：DOM渲染后触发  微任务：DOM渲染前触发
    let dom = document.querySelector(".container");
    const d1 = document.createElement("div");
    d1.innerHTML = "d1";
    const d2 = document.createElement("div");
    d1.innerHTML = "d2";
    dom.appendChild(d1);
    dom.appendChild(d2);
    /* 微任务DOM渲染前触发的 */
    Promise.resolve().then((res) => {
      console.log(dom.children.length);
      alert("66"); //此时dom还未渲染
    });
    /* 宏任务DOM渲染后触发的 */
    setTimeout(() => {
      console.log("setTimeout执行了吗");
    });
  </script>
</html>
